<template>
	<popup class="authorize-popup" ref="authorizePopup">
		<view class="main">
			<view class="authorize-dialog" v-if="type === 1">
				<text class="iconfont icon-guanbi close" @tap="close"></text>
				<text class="iconfont icon-taobao taobao"></text>
				<view class="text">购物领取优惠</view>
				<view class="text">需要授权淘宝登录哦</view>
				<view class="login" @tap.stop="authorized">去淘宝授权登录</view>
			</view>
			<view class="loading" v-if="type === 2">
				<view class="close">
					<text class="iconfont icon-guanbi" @tap="close"></text>
				</view>
				<image mode="widthFix" class="bg" src="@/static/images/common/authorize-bg.png" />
				<view class="logo-box">
					<image mode="widthFix" class="logo" src="@/static/images/common/app-logo.png" />
					<text class="text">即将前往淘宝</text>
					<image mode="widthFix" class="logo" src="@/static/images/common/taobao-logo.png" />

					<view class="spinner-r"></view>
					<view class="spinner-rs"></view>
					<view class="spinner">
						<view class="bounce bounce1"></view>
						<view class="bounce bounce2"></view>
						<view class="bounce bounce3"></view>
						<view class="bounce bounce4"></view>
						<view class="bounce bounce5"></view>
					</view>
				</view>
				<view class="title">先去淘宝领券下单</view>
				<view class="desc">买完回来领取现金补贴</view>
			</view>
		</view>
	</popup>
</template>

<script>
	import Popup from '@/components/uni/Popup';
	const Alibcsdk = uni.requireNativePlugin('UZK-Alibcsdk');
	export default {
		name: 'Authorize',
		components: {
			Popup
		},
		data() {
			return {
				type: 1
			};
		},
		methods: {
			open() {
				this.type = 1;
				this.$refs.authorizePopup.open();
			},
			close() {
				this.type = 1;
				this.$refs.authorizePopup.close();
			},
			authorized() {
				this.type = 2;
				this.$service.common.userHf.getMainKey({
					app: 'hf',
				}).then((key) => {
					Alibcsdk.init(
						initResult => {
							if (initResult.status) {
								Alibcsdk.login(
									loginResult => {
										if (loginResult.status) {
											Alibcsdk.getpublisher({
													url: 'https://oauth.taobao.com/authorize?response_type=token&client_id=' + key + '&state=1212&view=wap'
												},
												result => {
													console.log(JSON.stringify(result))
													if (result.status) {
														plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
															this.$service.shopping.taobao.hfAuthorize({
																app: 'hf',
																nick: result.data.taobao_user_nick,
																tbUserId: result.data.taobao_user_id,
																accessToken: result.data.access_token,
																expiresIn: result.data.expires_in,
																refreshToken: result.data.refresh_token,
																versionCode: Number(wgtinfo.versionCode)
															}).then(() => {
																uni.showToast({
																	title: '授权成功',
																	icon: 'none'
																});
																// 获取用户信息
																// #ifdef H5
																this.$store.dispatch('getUserInfo', { versionCode: 140 });
																// #endif
																// #ifdef APP-PLUS
																plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
																	let params = { ...wgtinfo };
																	this.$store.dispatch('getUserInfo', params);
																});
																// #endif
															}).catch(err => {
																uni.showToast({
																	title: err.message,
																	icon: 'none'
																});
															})
														});
													} else {
														uni.showToast({
															title: '取消授权',
															icon: 'none'
														});
													}
												}
											)
										}
										this.close();
									}
								)
							} else {
								uni.showToast({
									title: "初始化失败",
									icon: 'none'
								});
							}
						}
					)
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.authorize-popup {
		.main {
			width: 480rpx;

			.authorize-dialog {
				height: 444rpx;
				border-radius: 16rpx;
				background: white;
				position: relative;

				@include flexBox(space-around, center, column);

				.close {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					color: #DEDEDE;
					font-size: 46rpx;
				}

				.taobao {
					font-size: 100rpx;
					color: #fe4a22;
					background-image: -webkit-gradient(linear,
						left 10,
						right 0,
						from(rgba(254, 74, 34, 1)),
						to(rgba(255, 168, 7, 1)));
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.text {
					font-size: 28rpx;
					color: #2e2d2d;
					text-align: center;
					margin-top: -20rpx;
				}

				.login {
					width: 366rpx;
					line-height: 72rpx;
					font-size: 32rpx;
					text-align: center;
					border-radius: 50rpx;
					color: $color-white;
					margin-bottom: 34rpx;
					box-shadow: 0 6rpx 12rpx rgba(247, 1, 20, 0.3);
					background: linear-gradient(225deg, #ff513f, #ff8444);
					transition: 0.5s;
				}
			}

			.loading {
				border-radius: 16rpx;
				width: 476rpx;
				height: 371rpx;
				@include flexBox(space-around, center, column);

				.bg {
					width: 476rpx;
					height: 371rpx;
					position: fixed;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
				}

				.close {
					width: 100%;
					display: flex;
					justify-content: flex-end;
					z-index: 10;
					padding-right: 20rpx;

					.iconfont {
						color: #fff;
						font-size: 34rpx;
					}
				}

				.logo-box {
					width: 100%;
					z-index: 10;
					margin-top: -20rpx;
					position: relative;
					@include flexBox(center, flex-start);

					.logo {
						width: 84rpx;
						height: 84rpx;
					}

					.text {
						font-size: 16rpx;
						color: #fff;
						margin: 20rpx 30rpx;
					}

					.spinner {
						position: absolute;
						top: 50rpx;

						.bounce {
							width: 10rpx;
							height: 10rpx;
							margin: 0 5rpx;
							border-radius: 100%;
							display: inline-block;
							-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
							animation: bouncedelay 1.4s infinite ease-in-out;
							-webkit-animation-fill-mode: both;
							animation-fill-mode: both;
						}

						.bounce1 {
							-webkit-animation-delay: -0.32s;
							animation-delay: -0.32s;
						}

						.bounce2 {
							-webkit-animation-delay: -0.16s;
							animation-delay: -0.16s;
						}
					}

					// 圆圈放大效果
					.spinner-r {
						position: absolute;
						left: 60rpx;
						top: -20rpx;
						width: 130rpx;
						height: 130rpx;
						margin: 0 auto;
						background-color: #ffffff;
						border-radius: 100%;
						-webkit-animation: scaleout 1.5s infinite ease-in-out;
						animation: scaleout 1.5s infinite ease-in-out;
					}

					.spinner-rs {
						width: 150rpx;
						height: 150rpx;
						margin: 0 auto;
						background-color: #ffffff;
						position: absolute;
						right: 50rpx;
						top: -30rpx;
						border-radius: 100%;
						-webkit-animation: scaleout 1.5s infinite ease-in-out;
						animation: scaleout 1.5s infinite ease-in-out;
					}
				}

				.title {
					z-index: 10;
					margin-top: 80rpx;
					font-size: 20rpx;
					color: #262424;
				}

				.desc {
					z-index: 10;
					color: #F70114;
					font-size: 28rpx;
					margin-top: -20rpx;
				}
			}
		}
	}

	@-webkit-keyframes bouncedelay {

		0%,
		80%,
		100% {
			-webkit-transform: scale(0);
		}

		40% {
			-webkit-transform: scale(1);
		}
	}

	@keyframes bouncedelay {

		0%,
		80%,
		100% {
			transform: scale(0);
			-webkit-transform: scale(0);
			background-color: rgba(255, 255, 255, 0.6);
		}

		40% {
			transform: scale(1);
			-webkit-transform: scale(1);
			background-color: rgba(255, 255, 255, 1);
		}
	}

	@-webkit-keyframes scaleout {
		0% {
			-webkit-transform: scale(0);
		}

		100% {
			-webkit-transform: scale(1);
			opacity: 0;
		}
	}

	@keyframes scaleout {
		0% {
			transform: scale(0);
			-webkit-transform: scale(0);
		}

		100% {
			transform: scale(1);
			-webkit-transform: scale(1);
			opacity: 0;
		}
	}
</style>
